<template>
  <div>
    <Modal v-model="flag" title="警告" @on-ok="ok2" @on-cancel="cancel">
      <p>此操作会删除板块下的所有帖子</p>
      <p>确定要删除吗？？</p>
    </Modal>

    <div class="board-container">
      <div v-for="item in ajaxResult" :key="item.boardId" class="board-content">
        <Card style="width: 90%; height: 90%; margin: 0 auto">
          <div style="text-align: left">
            <h3>{{ item.boardName }}</h3>
            <Divider />
            <h3>{{ item.boardContent }}</h3>
          </div>
          <Button
            @click="deleteBoard(item.boardId)"
            style="margin-top: 20px"
            type="error"
            >删除</Button
          >
          <Button
            style="margin-top: 20px"
            type="info"
            @click="editBoard(item.boardId)"
            >编辑版块</Button
          >
        </Card>
      </div>
    </div>
    <Modal
      style="position: absolute"
      v-model="ModalSwitch"
      title="创建版块"
      @on-ok="submitCreateBoard"
    >
      <Input v-model="ModalTitle" placeholder="请输入版块名称..." />
      <Input
        v-model="ModalContent"
        type="textarea"
        :rows="4"
        placeholder="请输入版块的内容..."
      />
    </Modal>
    <Modal
      style="position: absolute"
      v-model="ModalSwitch2"
      title="编辑版块"
      @on-ok="submitEditBoard"
    >
      <Input v-model="ModalTitle" placeholder="请输入版块名称..." />
      <Input
        v-model="ModalContent"
        type="textarea"
        :rows="4"
        placeholder="请输入版块的内容..."
      />
    </Modal>
    <div style="position: fixed; bottom: 3em; width: 20%; margin-left: 40%">
      <Button type="success" @click="createBoard">创建版块</Button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BoardManage',
  data () {
    return {
      ajaxResult: '',
      flag: false,
      tempBoardId: '',
      ModalSwitch: false,
      ModalTitle: '',
      ModalContent: '',
      ModalSwitch2: false,
      ModalboardId: ''
    }
  },
  methods: {
    editBoard: function (boardId) {
      this.ModalSwitch2 = true
      this.ModalboardId = boardId
      this.ajaxResult.forEach(element => {
        if (element.boardId === this.ModalboardId) {
          this.ModalTitle = element.boardName
          this.ModalContent = element.boardContent
        }
      })
    },
    submitEditBoard: function () {
      if (this.ModalTitle.trim().length === 0 || this.ModalContent.trim().length === 0) {
        this.$Message.error('标题内容不能为空!')
        return
      }
      var _this = this // 临时变量
      this.$axios({
        method: 'post',
        url: '/updateBoard',
        data: {
          boardId: this.ModalboardId,
          boardName: this.ModalTitle,
          boardContent: this.ModalContent
        }
      }).then(function (resp) {
        if (resp.data.code === 1) {
          _this.ModalTitle = ''
          _this.ModalContent = ''
          _this.ModalboardId = ''
          _this.$Message.info('修改版块成功!')
          _this.selectBoard()
        }
      })
    },
    submitCreateBoard: function () {
      if (this.ModalTitle.trim().length === 0 || this.ModalContent.trim().length === 0) {
        this.$Message.error('板块名和描述不能为空!')
        return
      }
      var _this = this // 临时变量
      this.$axios({
        method: 'post',
        url: '/createBoard',
        data: {
          boardName: this.ModalTitle,
          boardContent: this.ModalContent
        }
      }).then(function (resp) {
        if (resp.data.code === 1) {
          window.setTimeout(function () {
            _this.$Message.info('创建版块成功!')
            _this.selectBoard()
          }, 1000)
        }
      })
    },
    createBoard: function () {
      this.ModalSwitch = true
    },
    deleteBoard: function (boardId) {
      this.tempBoardId = boardId
      this.flag = true
    },
    ok2 () {
      var _this = this // 临时变量
      this.$axios({
        method: 'post',
        url: '/deleteBoard',
        data: {
          boardId: this.tempBoardId
        }
      }).then(function (resp) {
        if (resp.data.code === 1) {
          _this.$Message.info('删除版块成功!')
          _this.selectBoard()
        }
      })
    },
    cancel () {
      this.$Message.info('已取消')
    },
    selectBoard () {
      var _this = this // 临时变量
      this.$axios({
        method: 'get',
        url: '/selectBoard'
      }).then(function (response) {
        console.log(response.data.result)
        _this.ajaxResult = response.data.result
      })
    }
  },
  mounted () {
    this.selectBoard()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.board-container {
  margin-left: 10%;
  margin-top: 3%;
  width: 80%;
  /* border: 0.1em solid red; */
}
.board-content {
  float: left;
  width: 33%;
  margin-bottom: 1em;
  /* border: 0.1em solid red; */
}
</style>
